<template>
  <div class="main-canvas">
    <h1>医师简介</h1>
    <div class="content-canvas">
      <div class="up">
        <div class="image-canvas">
          <img :src="curActive.src">
        </div>
        <div class="text-canvas">
          <div class="doctorName">{{ curActive.doctorName }}</div>
          <div class="scrollLine" :class="{ hidden : scrollLine }"></div>
          <div class="doctorDescribe el1"v-bar="{
              preventParentScroll: true,
              scrollThrottle: 30,
          }">
            <div class="el2">{{ curActive.describe }}</div>
          </div>
        </div>
      </div>
      <div class="down" id="doctorCard">
        <div v-for="item in docList" :key="item.docNo" class="doctorCard" @click="handleActive(item)" :class="{ active: item.docNo === activeNo }">
          <i class="el-icon-s-custom"></i>
          <p>{{item.doctorName}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Doctors",
  data() {
    return {
      activeNo: 1,
      curActive: {
        docNo: 1, doctorName: '李航宇',
        describe: '医学博士，副教授，副主任医师 硕士生导师 1998年毕业于中国医科大学，长期从事胆道、疝外科的临床和实验室研究工作。在国内外学术杂志发表相关领域论文近30篇。主译英文论著1部，参译英文论著1部。作为负责人承担国家自然科学基金面上项目1项及省级课题2项。担任中国医师协会外科医师分会胆道外科医师委员会委员、辽宁省抗癌协会胆道肿瘤专业委员会秘书、辽宁省细胞生物学学会理事、辽宁省细胞生物学学会普外生物细胞技术专业委员会副主任委员、《中国组织工程研究与临床康复杂志》特约审稿人。',
        src: require('../../../assets/doc-lihangyu.png')
      },
      docList: [
        { docNo: 1, doctorName: '李航宇',
          describe: '医学博士，副教授，副主任医师 硕士生导师 1998年毕业于中国医科大学，长期从事胆道、疝外科的临床和实验室研究工作。在国内外学术杂志发表相关领域论文近30篇。主译英文论著1部，参译英文论著1部。作为负责人承担国家自然科学基金面上项目1项及省级课题2项。担任中国医师协会外科医师分会胆道外科医师委员会委员、辽宁省抗癌协会胆道肿瘤专业委员会秘书、辽宁省细胞生物学学会理事、辽宁省细胞生物学学会普外生物细胞技术专业委员会副主任委员、《中国组织工程研究与临床康复杂志》特约审稿人。',
          src: require('../../../assets/doc-lihangyu.png')
        },
        { docNo: 2, doctorName: '刘金钢',
          describe: '教授，主任医师，博士生导师，普通外科主任，辽宁名医，沈阳杰出医师。2015年2月-2020年7月任中国医科大学附属第四医院院长。国内较早开展微创手术的外科医生之一，也是中国医科大学最早开展微创手术的医生。擅长应用微创技术治疗复杂、疑难肝胆胰疾病，是我国减重和代谢外科领域的开创者。微创手术治疗肥胖、糖尿病等代谢疾病处于国内领先、国际先进水平。兼任中华医学会外科分会常务委员、甲状腺及代谢外科学组组长，中国医师协会外科分会常委，辽宁省医学会外科分会主任委员（2014-2018），美国外科学院（FACS）院士，美国减重及代谢外科协会会员(ASMBS)，世界减重及代谢外科联盟理事(IFSO)。',
          src: require('../../../assets/doc-liujingang.png')
        },
        { docNo: 3, doctorName: '荆科',
          describe: '教授，主任医师。1986年毕业于中国医科大学儿科系，从医30年。社会兼职：沈阳医学会儿科分会，委员；辽宁省中西医结合学会儿童康复医学专业委员会，常务委员。',
          src: require('../../../assets/doc-lihangyu.png')
        },
        { docNo: 4, doctorName: '王玉霞',
          describe: '1962年出生，教授/主任医师，留学日本；2007年遴选为中国医科大学肿瘤放疗专业的博士生导师。2013年由中国医科大学附属一院调转到附属四院。现任中国医科大学附属第四医院肿瘤放疗科主任。',
          src: require('../../../assets/doc-lihangyu.png')
        },
        { docNo: 5, doctorName: '曹霞',
          describe: '职称（含资格）：副教授、副主任医师 社会兼职：中国优生优育协会理事，沈阳市医学会围产分会委员。 2004年毕业于中国医科大学妇科肿瘤专业。从事妇产科工作18年，有较强的教学及组织协调能力，对产科理论知识坚实，临床经验丰富。发表论文十余篇，SCI 2篇。',
          src: require('../../../assets/doc-lihangyu.png')
        },
        { docNo: 6, doctorName: '刘丹',
          describe: '副主任医师，医学博士，硕士研究生导师，多年来在国内外期刊发表论文10余篇，主持辽宁省自然科学基金1项，作为主要参与者参研省市级课题多项；社会兼职：辽宁省重症医学委员会青年委员，辽宁省重症质控中心委员，辽宁细胞生物学会重症委员会常务理事；2020年获抗击新冠肺炎疫情全国三八红旗手称号，历年来多次获中国医科大学附属第四医院优秀医生、优秀总住院等称号。',
          src: require('../../../assets/doc-lihangyu.png')
        },
        { docNo: 7, doctorName: '王绍峰',
          describe: '擅长口腔颌面部外科手术、牙槽外科手术、面部美容手术，精于种植牙、全瓷牙修复。先后开展了烤瓷、铸造支架修复、覆盖义齿、精密附着体技术，以及牙体缺损的治疗和修复及口腔固定义齿、活动义齿、全口义齿的修复。',
          src: require('../../../assets/doc-lihangyu.png')
        }
      ],
      scrollLine: false
    }
  },
  mounted() {
    document.getElementById('doctorCard').addEventListener('click',()=> {
      let vbHeight = document.getElementsByClassName('vb-dragger')[0].offsetHeight
      if (vbHeight === 0) {
        this.scrollLine = true
      } else if (vbHeight >= 0) {
        this.scrollLine = false
      }
    })
  },
  methods: {
    handleActive(item) {
      this.activeNo = item.docNo
      this.curActive = item
    }
  }
}
</script>

<style lang="scss" scoped>
  h1 {
    font-size: 35px;
    color: rgba(23, 22, 22, 0.93);
    text-align: center;
    line-height: 100px;
    margin-top: 50px;
  }
  .content-canvas {
    width: 1300px;
    margin: 0 auto;
    height: 750px;
    .up {
      position: relative;
      height: 350px;
      .image-canvas {
        width: 480px;
        height: 230px;
        position: absolute;
        left: 130px;
        top: 60px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text-canvas {
        width: 830px;
        height: 100%;
        background-color: rgba(60,60,60,0.93);
        float: right;
        padding-left: 200px;
        .doctorName {
          font-size: 25px;
          color: white;
          line-height: 80px;
          font-weight: 900;
          padding-top: 40px;
        }
        .doctorDescribe {
          font-size: 14px;
          color: #a3a3a3;
          line-height: 33px;
          height: 140px;
          width: 550px;
          padding-right: 100px;
          letter-spacing: 1px;
          overflow: hidden;
        }
      }
    }
    .el2 {
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE 10+ */
    }
    .el2::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    .down {
      box-shadow: 0px 0px 18px #e0e0e0;
      height: 230px;
      margin-top: 70px;
      display: flex;
      justify-content: space-between;
      padding: 50px 97px 50px 97px;
      .doctorCard {
        transition-property: all;
        transition-duration: 0.2s;
        border: 1px solid #e3e3e3;
        cursor: pointer;
        width: 130px;
        height: 130px;
        .el-icon-s-custom {
          font-size: 50px;
          display: block;
          text-align: center;
          margin-top: 25px;
        }
        p {
          margin: 10px;
          text-align: center;
        }
      }
      .active {
        margin-top: -20px;
        color: white;
        background-color: rgba(60,60,60,0.93);
      }
    }
  }
  .hidden {
    visibility: hidden;
  }
  .scrollLine {
    height: 125px;
    width: 2.5px;
    background-color: white;
    position: absolute;
    right: 88px;
    top: 129px
  }
</style>
